<template>
	<div>
		<t-swiper ref="tSwiperRef" :autoplay="autoplayDate" v-if="isSwiperMounted"  :height="height + 'px'" :navigation="{ type: 'dots-bar' }" >
		    <t-swiper-item v-for="(item, index) in props.list" :key="index">
				<ImageCache :url="item.imageUrl" :aspectRatiodate="props.aspectRatiodate"></ImageCache>
		    </t-swiper-item>
		</t-swiper>
	</div>
</template>

<script setup>
	import { ref, watch, nextTick, defineProps, defineExpose } from 'vue';
	import { useRouter } from 'vue-router';
	import { Message } from 'tdesign-mobile-vue';
	import logo from '/src/assets/logo-bai.png'
	import logoText from '/src/assets/logo-text.png'
	import header from '/src/assets/header.png'

	import ImageCache from "@/components/ImageCache";
	const bannerList = ref([]);
	
	const props = defineProps({
	  height: {
	    type: String,
	    required: true,
	  },
	  aspectRatiodate: {
	    type: String,
	    required: true,
	  },
	  autoplayDate: {
	    type: Boolean,
	    default: true,
	  },
	  list: {
	      type: Array, // 类型验证：必须是数组
	      required: true, // 是否必传：true 表示父组件必须传递该数组
	      default: () => [],
	   },
	});
	const tSwiperRef = ref(null);
	const isSwiperMounted = ref(true); // 控制 t-swiper 是否渲染
	//  定义 reload 方法：实现轮播“刷新”逻辑
	const reload = async () => {
	  try {
	    isSwiperMounted.value = false; // 先销毁旧组件
	    await nextTick(); // 等待 DOM 更新（确保旧组件已销毁）
	    isSwiperMounted.value = true; // 重建新组件，此时会重新渲染 props.list
	    console.log('Swiper 组件刷新成功（通过销毁重建实现）');
	  } catch (err) {
	    console.error('Swiper 组件刷新失败：', err);
	    // 可选：添加错误提示，如 Message.error('轮播刷新失败，请重试');
	  }
	};
	watch(
	  () => props.list, 
	  (newList, oldList) => {
	    if (newList !== oldList && newList.length > 0) {
	      reload();
	    }
	  },
	  { deep: true }
	);
	
	// 暴露 reload 方法给父组件
	defineExpose({
	  reload
	});
	
	
	
</script>

<style scoped lang="scss">
	
	
</style>